<template>
	<u-index-list :scrollTop="scrollTop" :indexList='indexList'>
		<view class='currentcity'>当前城市</view>
		<view class="city">{{city}}</view>
		<view v-for="(item, index) in indexList" :key="index">
			<u-index-anchor :index="item" />
			<view v-for="(item1, index1) in dataList" :key="index1">
				<template v-if='item == item1.item'>
					<view @click="selectCity(item2)" class="list-cell" v-for="(item2, index2) in item1.list" :key="index2">{{item2}}</view>
				</template>
			</view>
		</view>
	</u-index-list>
</template>
<script>
	export default {
		computed:{
			city(){
				return this.$store.state.allocation.city
			},
			indexList(){
				let indexArray = [];
				this.dataList.map((item)=>{
					indexArray.push(item.item);
				});
				return indexArray;
			}
		},
		data() {
			return {
				scrollTop: 0,
				dataList:[
					{
						item:'A',
						list:['安庆','安阳']
					},
					{
						item:'B',
						list:['蚌埠','亳州']
					},
					{
						item:'C',
						list:['池州','成都','常州','重庆']
					},
					{
						item:'D',
						list:['德州','大连']
					},
					{
						item:'E',
						list:['额多山','儿科州']
					},
					{
						item:'F',
						list:['福建','佛山']
					},
					{
						item:'G',
						list:['赣州','广州']
					},
					{
						item:'H',
						list:['合肥','淮北','淮安','黄山','淮南']
					},
					{
						item:'J',
						list:['合肥','淮北','淮安','黄山','淮南']
					},
					{
						item:'N',
						list:['南京','南宁','南昌','南通']
					}
				],
			}
		},
		methods:{
			selectCity: async function(c){
				await this.$store.commit('updateCity',c);//更新城市
				uni.navigateBack();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
	.currentcity{
		box-sizing: border-box;
		padding: 14rpx 24rpx;
		color: #606266;
		width: 100%;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 1.2;
		background-color: whitesmoke;
	}
	.city{
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		font-weight: bold;
	}
</style>